<template>
  <div class="pick-container">
    <div class="pipelines">
      <el-segmented v-model="currentPipeline" :options="pipelines" @change="togglePipeline" />
    </div>
    <div class="lights">
      <div v-for="item in pipelines" :key="item.name" :class="getLightClass(item)"></div>
    </div>
    <div class="full-screen-btn">
      <svg-icon icon-name="icon-quanping" :size="30" @click="toggleFullScreen"></svg-icon>
    </div>
  </div>
</template>
<script setup name="PipeLinePickCom">
import { onMounted } from 'vue'
import { usePipeline } from '../hooks/usePipeline'
import { useStatus } from '../hooks/useStatus'
import { useChart } from '../hooks/useChart'
const { currentPipeline, pipelines, queryInitPipeline, listAllPipeline, togglePipeline } =
  usePipeline()
const { openSocket, getLightClass } = useStatus()
const { toggleFullScreen } = useChart()
onMounted(() => {
  queryInitPipeline()
  listAllPipeline()
  openSocket()
})
</script>
<style lang="less" scoped>
.pick-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  .pipelines {
    padding: 4px;
    .el-segmented {
      --el-segmented-item-selected-color: var(--el-text-color-primary);
      --el-segmented-item-selected-bg-color: #a37ffe;
      --el-border-radius-base: 20px;
    }
  }
  .lights {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
    .circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
  }
  .full-screen-btn {
    position: absolute;
    right: 40px;
    cursor: pointer;
  }
}
.danger {
  background-image: radial-gradient(circle, #f59e9e, #f88786, #f96f6c, #f75552, #f33636) !important;
}
.health {
  background-image: radial-gradient(circle, #baf5ca, #97e7aa, #73d988, #4cca65, #07bb3f);
}
.disable {
  background-image: radial-gradient(circle, #ebf3bd, #e5e19a, #e3ce79, #e4b959, #e6a23c);
}
</style>
